<template>
  <div class="pa-3">
    <v-row>
      <v-col cols="4">
        <v-text-field solo-inverted class="elevation-0" label="店铺名称" dense v-model="businessName"></v-text-field>
      </v-col>
      <v-col cols="2">
        <v-btn color="primary" @click="getBusiness">搜索</v-btn>
      </v-col>
      <v-col cols="2">
        <v-btn color="success" @click="$router.push('/business/businessPage')">新增店铺</v-btn>
      </v-col>
    </v-row>
    <v-row >
      <v-col style="max-width: 250px;min-width: 220px" v-for="business in businessList" :key="business.id">
        <v-card @click="openDetailsPage(business)">
          <v-card-title>{{business.name}}</v-card-title>
          <v-divider/>
          <v-card-text>
            <v-avatar size="100" tile>
              <v-img :src="business.image" width="100" height="100"></v-img>
            </v-avatar>
            {{business.announcement}}
          </v-card-text>
        </v-card>
      </v-col>
      <v-col cols="12">
        <v-pagination
            v-model="pageNum"
            class="my-4"
            :length="totalPage"
        ></v-pagination>
      </v-col>
    </v-row>
  </div>
</template>

<script>
import {selectBusinessByNameAndPage} from "../../http/api/business";

export default {
  name: "Index",
  data:()=>({
    businessName:null,
    pageNum:1,
    pageSize:10,
    totalPage:0,
    businessList:[],
  }),
  watch:{
    pageNum(){
      this.getBusiness()
    }
  },
  created() {
    this.init()
  },
  methods:{
    init(){
      this.getBusiness()
    },
    getBusiness(){
      if (this.businessName){
        this.businessName = this.businessName.trim()
      }
      selectBusinessByNameAndPage(this.businessName,this.pageNum,this.pageSize).then(res=>{
        this.businessList = res.data.list;
        this.totalPage = res.data.pages;
      })
    },
    openDetailsPage(business){
      this.$router.push({
        path:'/business/businessPage',
        query:{
          businessId:business.id
        }
      })
    }
  }
}
</script>

<style scoped>

</style>